<template>
  <div class="box1">
    <div class="imgbox" v-for="item in state.musicList" :key="item">
      <router-link :to="{path:'/ITEM', query:{id:item.id}}">
      <img :src="item.coverImgUrl" alt="" class="img1">
      <span class="name">{{item.name}}</span>
      </router-link>
  </div>
  </div>
</template>
<script>
import { reactive,onMounted} from 'vue';
import {getMusicList} from"../api/home/api"
export default {
setup(){
  const state=reactive({
    musicList:[],
  })
  onMounted(async()=>{
    let res =await getMusicList();
    console.log(res);
     state.musicList =res.data.playlists;
  });
  return {state}
}
 };

</script>
<style>
.box1{
  background-image: url(../image/beijing1.jpg);
  width: 100%;
  height: 1200px;
  display: flex;
  flex-wrap: wrap;

}
.img1{
  width: 200px;
  height: 200px;
  margin-left: 9px;
  margin-right: 9px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 40px 10px 40px;
}
.name{
  width: 200px;
  height:0px;
  margin-left: 50px;
  margin-right: 9px;
   display: flex;
}
.a{
  color:black;
}
</style>